<template>
  <div>
    <el-select v-model="deskId" placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.deskNo"
          :value="item.id">
      </el-option>
    </el-select>
    <el-row :gutter="12">
      <el-col :span="6" v-for="item in tableData">
        <el-card shadow="always" >
          <el-descriptions title="茶叶信息" column="2">
            <el-descriptions-item label="茶叶Id">{{item.id}}</el-descriptions-item>
            <el-descriptions-item label="茶叶名称">{{item.teaName}}</el-descriptions-item>
            <el-descriptions-item label="茶叶单价">{{item.price}}</el-descriptions-item>
            <el-descriptions-item label="茶叶库存">{{item.count}}</el-descriptions-item>
          </el-descriptions>
          <el-form>
            <el-form-item label="选择数量">
              <el-input-number v-model="item.selectCount" :min="1" :max="item.count" @change="changPrice()"></el-input-number>
            </el-form-item>
            <el-button style="float:right;margin-right: 10px;margin-bottom: 10px" @click="selectRoom(item)" type="primary">添加</el-button>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-divider>购物车</el-divider>
    <el-row>
      <el-table
          :data="selectTea"
          style="width: 100%">
        <el-table-column
            prop="teaName"
            label="茶叶名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="price"
            label="单价"
            width="180">
        </el-table-column>
        <el-table-column
            prop="selectCount"
            label="数量">
        </el-table-column>
        <el-table-column
            prop="teaTotal"
            label="小计">
          <template slot-scope="scope">
            {{scope.row.price*scope.row.selectCount}}
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-divider>总价:{{totalPrice}}</el-divider>
    <div style="float: right;margin: 20px"><el-button @click="addOrder()">结算</el-button> </div>

  </div>
</template>

<script>
import {doGetAllDesk} from "@/api/desk";
import {doGetAllTea} from "@/api/tea";
import {doCreateOrder} from "@/api/order";

export default {
  name: "index",
  data(){
    return{
      page:{pageIndex:1,pageSize:10},
      dataCount:10,
      deskId:1,
      tableData: [],
      options:[],
      nowDate:[],
      selectTea:[],
      totalPrice:0
    }
  },
  methods:{
    getTableData(){
      this.addDialog=false;
      this.updateDialog=false;
      const obj = {
        pageIndex: this.page.pageIndex,
        pageSize: this.page.pageSize,
        queryInfo: this.queryInfo
      }
    },
    onSubmit() {
      this.getTableData();
    },
    handleSizeChange(val) {
      this.page.pageSize=val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.pageIndex=val;
      this.getTableData();
    },
    selectRoom(room){
      if (room.count===0){
        this.$message.error("添加失败,当前商品无库存");
      }else{
        var flag = false;
        for (let i = 0; i < this.selectTea.length; i++) {
          var tea = this.selectTea[i];
          if (tea.id===room.id){
            this.selectTea[i]=room;
            flag=true;
          }
        }
        if (flag===false){
          this.selectTea.push(room)
        }
        this.changPrice();
      }
    },
    handleDelete(index){
     console.log(index)
     var newArry = [];
      for (let i = 0; i < this.selectTea.length; i++) {
        if (this.selectTea[i].id!=index){
          newArry.push(this.selectTea[i]);
        }
      }
      this.selectTea=newArry;
      this.changPrice();
    },
    changPrice(){
      var price = 0;
      for (let i = 0; i < this.selectTea.length; i++) {
        price+=this.selectTea[i].price*this.selectTea[i].selectCount;
      }
      this.totalPrice = price;
    },
    addOrder(){
      const obj = {
        did:this.deskId,
        token: window.localStorage.getItem("token"),
        teaOrders:this.selectTea
      }
      doCreateOrder(obj).then(res=>{
        if (res.code===200){
          doGetAllTea().then(res=>{
            if (res.code===200){
              this.tableData=res.data;
            }
          })
          this.$message.success("下单成功，总计："+this.totalPrice);
          this.selectTea=[];
          this.totalPrice=0;

        }
      })
    }
  },
  mounted() {
    this.getTableData();
    doGetAllDesk().then(res=>{
      if (res.code===200){
        for (let i = 0; i < res.data.length; i++) {
          const desk =res.data[i];
          this.options.push({id:desk.id,deskNo:desk.deskNo})
        }
      }
    });
    doGetAllTea().then(res=>{
      if (res.code===200){
        this.tableData=res.data;
      }
    })
  }
}
</script>

<style lang="less" scoped>
  .el-card{
    margin-top: 10px;
  }
</style>